import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroDetailReactiveFormComponent } from './hero-detail-reactive-form/hero-detail.reactive-form.component';
import { HeroFormComponent } from './hero-form/hero-form.component';

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: 'dashboard',
                component: DashboardComponent
            },
            {
                path: '',
                component: HeroesComponent
            },
            {
                path: 'detail/:id',
                component: HeroDetailComponent
            },
            {
                path: 'hero-form',
                component: HeroFormComponent
            },
            {
                path: 'hero-detail-reactive-form',
                component: HeroDetailReactiveFormComponent
            }
        ]
    }
];

@NgModule({
    // Only call RouterModule.forRoot in the root AppRoutingModule (or the AppModule if that's where you 
    // register top level application routes). In any other module, you must call the RouterModule.forChild 
    // method to register additional routes.
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class HeroesRoutingModule { }